<template>
  <div class="four channel-item">
    <el-form
      :rules="rules"
      ref="ruleForm"
      label-width="140px"
      class="editor-plus-form"
      size="small"
    >
      <span class="share-row" v-hasPermi="['system:channel:edit']">
        <el-button
          type="primary"
          size="mini"
          @click="share()"
          v-if="!channelDetails.listtemplateId"
          >共享栏目参数</el-button
        >
        <el-button type="primary" size="mini" @click="noShare" v-else
          >取消共享模板</el-button
        >
        <el-button type="primary" size="mini" @click="handleSharedCloumn"
          >查看共享的栏目</el-button
        >
        <!-- <el-button type="primary" size="mini">查看共享的栏目</el-button>lId{{channelDetails.lId}} -->
        <!-- <div v-if="share4.length>0"> -->
        <!-- <div v-if="false">
        <el-button type="primary" size="mini" @click="cacleShare()">取消共享</el-button>
        您已经选择将内容共享给栏目 <font color='red' v-for="(item,index) in share4" :key="index"> 《{{item}}》</font>
      </div> -->
        <span v-if="share4.length > 0">
          <!-- <div v-if="false"> -->
          <el-button type="primary" size="mini" @click="cacleShare()"
            >取消共享</el-button
          >
          您已经选择将内容共享给栏目
          <font color="red" v-for="(item, index) in share4" :key="index">
            《{{ item.label }}》</font
          > </span
        ><span v-if="share4From.length > 0">
          <!-- <div v-if="false"> -->
          共享栏目<font
            color="red"
            v-for="(item, index) in share4From"
            :key="index"
          >
            《{{ item.label }}》</font
          >
        </span>
      </span>
      <el-row>
        <el-col :span="12">
          <el-form-item label="内容最大字数:" prop="countPerRow">
            <el-input
              v-model.number="channelDetails.listTemplate.countPerRow"
              maxlength="4"
              @input="
                (val) => {
                  channelDetails.listTemplate.countPerRow = val.replace(
                    /\D/g,
                    ''
                  );
                }
              "
            >
              <template slot="append">0-9999</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标题最大长度:" prop="maxHeader">
            <el-input
              v-model.number="channelDetails.listTemplate.maxHeader"
              maxlength="2"
              @input="
                (val) => {
                  channelDetails.listTemplate.maxHeader = val.replace(
                    /\D/g,
                    ''
                  );
                }
              "
            >
              <template slot="append">0-99</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="标题图片大小:" prop="imgSize">
            <el-input
              v-model.number="channelDetails.listTemplate.imgSize1"
              maxlength="4"
              style="width: 50%"
              @input="
                (val) => {
                  channelDetails.listTemplate.imgSize1 = val.replace(/\D/g, '');
                }
              "
              @blur="
                () =>
                  (channelDetails.listTemplate.imgSize1 =
                    channelDetails.listTemplate.imgSize1 || 320)
              "
            >
              <template slot="prepend">宽</template>
            </el-input>

            <el-input
              v-model.number="channelDetails.listTemplate.imgSize2"
              maxlength="4"
              style="width: 50%"
              @input="
                (val) => {
                  channelDetails.listTemplate.imgSize2 = val.replace(/\D/g, '');
                }
              "
              @blur="
                () =>
                  (channelDetails.listTemplate.imgSize2 =
                    channelDetails.listTemplate.imgSize2 || 240)
              "
            >
              <template slot="prepend">高</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="图片对齐方式:" prop="imgAlign">
            <el-radio-group v-model="channelDetails.listTemplate.imgAlign">
              <el-radio label="0">宽度对齐 </el-radio>
              <el-radio label="1">高度对齐 </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="文章列表区高度:" prop="articlePageHeight">
            <el-input
              v-model.number="channelDetails.listTemplate.articlePageHeight"
              maxlength="3"
              @input="
                (val) => {
                  channelDetails.listTemplate.articlePageHeight = val.replace(
                    /\D/g,
                    ''
                  );
                }
              "
              @blur="
                () => {
                  channelDetails.listTemplate.articlePageHeight =
                    channelDetails.listTemplate.articlePageHeight || 380;
                }
              "
            >
              <template slot="append">0-999</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文章标新期限:" prop="articleForNew">
            <el-input
              v-model.number="channelDetails.listTemplate.articleForNew"
              maxlength="2"
              @input="
                (val) => {
                  channelDetails.listTemplate.articleForNew = val.replace(
                    /\D/g,
                    ''
                  );
                }
              "
              @blur="
                () =>
                  (channelDetails.listTemplate.articleForNew =
                    channelDetails.listTemplate.articleForNew || 0)
              "
            >
              <template slot="append">天0-99</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="每行文章数目:" prop="oneRowArticleNum">
            <el-input
              v-model.number="channelDetails.listTemplate.oneRowArticleNum"
              maxlength="1"
              @input="
                (val) => {
                  channelDetails.listTemplate.oneRowArticleNum = val.replace(
                    /[^1-6]/g,
                    ''
                  );
                }
              "
              @blur="
                () =>
                  (channelDetails.listTemplate.oneRowArticleNum =
                    channelDetails.listTemplate.oneRowArticleNum || 1)
              "
            >
              <template slot="append">篇0-5</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="HOT显示条数:" prop="hotNum">
            <el-input
              v-model.number="channelDetails.listTemplate.hotNum"
              maxlength="2"
              @input="
                (val) => {
                  channelDetails.listTemplate.hotNum = val.replace(/\D/g, '');
                }
              "
              @blur="handleBlur"
            >
              <template slot="append">篇(整数)</template>
            </el-input>
          </el-form-item>
          <!-- ()=> {


              channelDetails.listTemplate.hotNum=channelDetails.listTemplate.hotNum||0} -->
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="文章排序方式:" prop="listOrder">
            <el-radio-group v-model="channelDetails.listTemplate.listOrder">
              <el-radio label="createdDate desc">发布时间降序 </el-radio>
              <el-radio label="createdDate asc">发布时间升序 </el-radio>
              <el-radio label="updatedDate desc">修改时间降序</el-radio>
              <el-radio label="updatedDate asc">修改时间升序</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row class="edit-row"> -->
      <el-row>
        <el-col :span="24" style="height: 100%">
          <el-form-item label="编辑器" class="codeEditor">
            <EditorPlus
              ref="editorPlus"
              v-bind:template.sync="channelDetails.listTemplate.template"
              @getTemplete="getTemplete"
            ></EditorPlus>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import EditorPlus from "@/components/EditorPlus";
import pinyin from "js-pinyin";
export default {
  props: {
    listtemplateIds: {},
    lId: {},
    share4: {},
    share4From: {},
    channelDetails: Object,
  },
  data() {
    return {
      template: null,

      rules: {},
    };
  },

  components: { EditorPlus },

  computed: {},

  mounted() {
    this.$nextTick(() => {
      this.$refs.editorPlus.radio1 = "view";
      // this.$emit("viewShareCloumn", "L");
    });
  },

  watch: {},

  methods: {
    share() {
      this.$emit("shareCloumn", "L");
    },
    handleSharedCloumn() {
      this.$emit("handleSharedCloumn", "L");
    },
    noShare() {
      this.$emit("update:listtemplateId", 0);
    },
    //共享源取消共享   不要
    cacleShare() {
      this.$emit("update:lId", null);
    },

    getTemplete(template) {
      // this.$emit("getCode", { tab: "four", template: template });
    },
    // 表单重置
    reset() {
      this.channelDetails = {
        template: null,
        listOrder: "createdDate desc",
        oneRowArticleNum: 1,
        articleForNew: 0,
        articlePageHeight: 380,
        imgAlign: 1,
        imgSize: "320,240",
        maxHeader: 30,
        countPerRow: 0,
      };
    },
    handleBlur() {
      console.log(
        "🚀 ~ file: four.vue:189 ~ handleBlur ~  this.channelDetails.listTemplate.hotNum",
        this.channelDetails.listTemplate.hotNum
      );
      this.channelDetails.listTemplate.hotNum =
        this.channelDetails.listTemplate.hotNum || 0;
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/assets/styles/el-form.scss";
.four {
  // padding: 0 100px;
  max-width: 1100px;
  margin: 0 auto;
}

::v-deep .el-form-item__content {
  .el-input-group {
    vertical-align: unset;
    .el-input-group__append,
    .el-input-group__prepend {
      // background: transparent;
      // border: none;

      border: 1px solid #dcdfe6;
      border-radius: 0;
      padding: 0 4px;
    }
  }
}
// ::v-deep .codeEditor {
//   .el-form-item__content {
//     height: 500px;
//   }
// }
</style>
